<template>
  <div class="common-layout">
    <el-container style="height: 100%">
      <el-header class="header-css">
        <Header @checkIfPassed="checkIfPassed"/>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              :default-active="status.activeItem"
              active-text-color="#409eff"
              background-color="white"
              class="el-menu-vertical-demo"
              :router="true"
          >
            <el-menu-item index="/shopOwner/homePage">
              <el-icon class="index-icon"><document /></el-icon>
              <span>个人中心</span>
            </el-menu-item>
            <el-menu-item index="/shopOwner/shopInfo">
              <el-icon class="index-icon"><document /></el-icon>
              <span>商店信息</span>
            </el-menu-item>
            <el-menu-item index="/shopOwner/orderList" v-if="status.ifPassed">
              <el-icon class="index-icon"><document /></el-icon>
              <span>订单列表</span>
            </el-menu-item>
            <el-menu-item index="/shopOwner/mealList" v-if="status.ifPassed">
              <el-icon class="index-icon"><document /></el-icon>
              <span>菜单列表</span>
            </el-menu-item>
            <el-menu-item index="/shopOwner/noticeList" v-if="status.ifPassed">
              <el-icon class="index-icon"><document /></el-icon>
              <span>通知列表</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main-css">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, reactive, watch} from "vue";
import Header from "@/components/shopOwner/Header.vue"
import {useRoute} from "vue-router/dist/vue-router";
import router from "@/router";
import {httpPostManage} from "@/api/httpService";

//#region 全局变量及方法
const route = useRoute();

const status = reactive({
  activeItem: "/shopOwner/orderList",
  ifPassed: false
});

watch(
    () => route.fullPath,
    (newVal) => {
      status.activeItem = newVal;
      if(newVal.includes("/shopOwner/orderList")) {
        status.activeItem = "/shopOwner/orderList";
      }
    },
    { immediate: true }
);

const checkIfPassed = async () => {
  let url = "/searchOneShop"
  let res = await httpPostManage(url, {});
  status.ifPassed = res.data.state === 2;
};

onMounted(() => {
  router.push("/shopOwner/homePage");
});
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;
  .header-css {
    margin-bottom: 1px;
    padding: 0
  }
  .main-css {
    padding: 15px;
    background-color: rgba(249, 249, 249, 1);
  }
}
.index-icon {
  margin-top: -2px;
  margin-right: 5px;
}
</style>